.rq-content-list-header {
  background: var(--requestly-color-background);
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;

  .rq-content-list-header-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;

    .rq-content-list-header-search-input {
      &,
      input {
        background-color: var(--requestly-color-background);
      }

      width: 224px;
      height: 32px;
    }

    .filter-btns {
      display: flex;
      gap: 4px;

      .filter-btn {
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;

        &.active {
          &.ant-btn {
            color: var(--requestly-color-text-default);
            background-color: var(--requestly-color-white-t-10);
            .label .ant-badge .ant-badge-count {
              background: var(--requestly-color-white-t-10);
            }
          }
        }

        &.ant-btn {
          color: var(--requestly-color-text-subtle);
          font-size: var(--requestly-font-size-sm, 13px);
          line-height: 20px;
          letter-spacing: 0.25px;
          height: 32px;
          padding: 4px 8px;
          min-width: 70px;

          &:hover {
            background-color: var(--requestly-color-white-t-20);
          }

          .label {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 8px;

            .icon {
              width: 16px;
              height: 16px;
              color: inherit;
              flex-shrink: 0;
            }

            .ant-badge .ant-badge-count {
              box-shadow: none;
              border-radius: 29px;
              background: var(--requestly-color-white-t-10);
            }
          }
        }
      }
    }
  }

  .rq-content-list-header-actions {
    display: flex;
    gap: 8px;
  }
}
